import React, { useContext, useState } from 'react';
import './posts.scss'
import Post from './Post'
import { useQuery } from "@tanstack/react-query"
import { makeRequest } from "../../axios"
import { AuthContext } from '../../context/authContext';

const Posts = () => {

  const {currentUser, setCurrentUser} = useContext(AuthContext);

  const homeStyle = currentUser.assetValue<0 ? 'posts' : 'postsUser'


  const BWIC_list_url = '/bwic/list/'+ String(currentUser.id)
  // console.log(BWIC_list_url)

  const { isLoading, error, data } = useQuery(
    {
      queryKey: ["posts"],
      queryFn: () => makeRequest.get(BWIC_list_url).then((res) => {return res.data.data})
    }
  )
  // console.log(data)

  return (
    <div className={homeStyle}>
      <div className='postsTitle'>
        <div className="container">
          <span className='bwicId'>#</span>
          <span className='cusip'>Cusip</span>
          <span className='dueDate'>Due Date</span>
          <span className='position'>Position</span>
          <span className='price'>Market Price($)</span>
          <span className='marketValue'>Starting Market Value($)</span>
          <span className='totalBids'>NO. of Bids</span>
          <span className='bidRank'>My Ranking</span>
          <span className='bidMarketValue'>My Bid Market Value($)</span>
          <span className='action'>Action</span>
        </div>
      </div>
      {
        error?
          <p className='prompt'>加载失败</p>
          :
          isLoading?
            <p className='prompt'>加载中</p>
            :
            data.map((post) =>(
              <Post key={post.id} post={post}/>
            ))
      }
    </div>
  )
}

export default Posts